<template>
    <div class="approval">
        <Header title="房屋认证" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <loading  v-if="isflag" />
        <div class="box_wrapper">
            <div class="box_main" @click="authdeta(item)" v-for="(item,index) in list" :key="index">
                <div class="box_left">
                    <div class="box_one">
                        <p>{{item.cellName}}{{item.unitName}}</p>
                        <p class="box_sex">{{item.userName}}</p>
                        <p>{{item.mobile}}</p>
                    </div>
                    <p class="box_sfz">{{item.cardTypeDesc}} : {{item.cardNo}}</p>
                    <p class="box_time">提交时间 : {{item.creDate}}</p>
                </div>
                <div class="box_right">待审核</div>
            </div>
        </div>
        <div class="box_icon">
            <div class="box_footer">
                <img src="../assets/icon_list.png">
                <p @click="cell" class="box_cell">{{quarters}}</p>
                <p class="box_unit" @click="units">{{username}}</p>
            </div>
        </div>
    </div>
</template>

<script>
import Header from './header'
import { authUser } from '../old_request'
export default {
    data(){
        return {
            quarters:'',            //选择小区
            list:[],                //接收后台数据
            username:'',
            isflag:true
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();                //返回上一页
        },
        units(){
            this.$router.push('/units');        //切换默认单元
        },
        cell(){
            this.$router.push('/cell');         //跳转选择小区
        },
        authdeta(total){                    //带参跳转到认证详情页
            this.$router.push({
                name:'authdetail',
                params:{total:total}
            })
        }
    },
    created(){
        let that = this;
        if(that.$store.state.blockid === null){
            that.wrapper.displace(that.$store.state.blockid,'login','item',that);
        }
        if(that.$store.state.unit){
            that.quarters = that.$store.state.unit;
        }
        
        if(that.$store.state.username){
            // console.log(that.$store.state.username)
            that.username = that.$store.state.username;
        }else{
            that.username = '全部'
        } 
        // let cellid = that.wrapper.getlocalstoage('unitsid');
        let data = {
            "sign":that.$md5(`${that.wrapper.globalData()}timestamp=${that.wrapper.gettime()}userId=${that.$store.state.userid}`),
            "timestamp":that.wrapper.gettime(),
            "blockId":that.$store.state.blockid,
            "userId":that.$store.state.userid,
            "cellId":that.$store.state.unitsid,
            "pageNo":1,
            "pageSize":10
        }
        authUser(data,that).then( (res) => {
            //sconsole.log(res)
            if(res.code === 0){
                that.list = res.data;
                that.isflag = false;
            }
        })
    }
}
</script>

<style scoped>
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .approval{
        height: 100%;
        margin-top: 50px;
        background: #EFEFF4;
    }
    .approval::before{
        content: ' ';
        position: fixed;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #EFEFF4;
        background-size: 100% auto;
    }
    .box_wrapper{
        margin: 15px 0px;
        padding: 1px 0px;
    }
    .box_main{
        display: flex;
        width: 92%;
        height: 120px;
        margin: 20px auto;
    }
    .box_left{
        flex: 1;
        background: white;
        border-top-left-radius:8px; 
        border-bottom-left-radius:8px; 
    }
    .box_left .box_one{
        display: flex;
        padding: 15px 0 10px 10px;
        font-size: 14px;
        font-weight: bold;
    }
    .box_one .box_sex{
        padding: 0px 10px;
    }
    .box_left .box_sfz{
        padding: 9px 0 10px 10px;
        font-size: 13px;
    }
    .box_left .box_time{
        padding: 9px 0 10px 10px;
        font-size: 13px;
    }
    .box_right{
        flex: 0 0 75px;
        height: 120px;
        line-height: 120px;
        text-align: center;
        background: #00A4E1;
        color: white;
        border-top-right-radius:8px; 
        border-bottom-right-radius:8px; 
        font-size: 18px;
    }
    .box_icon{
        position: fixed;
        bottom: 15px;
        left: 0;
        right: 0;
        text-align: center;
    }
    .box_icon .box_footer{
        position: relative;
    }
    .box_footer .box_cell{
        position: absolute;
        left: 100px;
        top: 13px;
        font-size: 18px;
        width: 110px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .box_footer .box_unit{
        position: absolute;
        right: 70px;
        top: 13px;
        font-size: 18px;
    }
</style>